<template>
  <div class="shoplist">
    <van-nav-bar left-text="返回" left-arrow class="title">
      <template #title>
        <van-search v-model="value" placeholder="请输入搜索关键词" shape="round" input-align="center" />
      </template>
      <template #right>
        <span class="iconfont icon-xinxing"></span>
      </template>
    </van-nav-bar>
    <van-tabs v-model="active">
      <van-tab title="全部订单" class="tbs">
          <template #default class="item-car">
              <carlist  v-for="item in list" :key="item" ></carlist>
          </template>
      </van-tab>
      <van-tab title="待付款" class="tbs">内容 2</van-tab>
      <van-tab title="待发货" class="tbs">内容 3</van-tab>
      <van-tab title="待收货" class="tbs">内容 3</van-tab>
      <van-tab title="待评价" class="tbs">内容 4</van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Vue from "vue";
import { NavBar, Toast, Search, Tab, Tabs,Card } from "vant";
import carlist from './carlist'
Vue.use(NavBar);
Vue.use(Toast);
Vue.use(Search);
Vue.use(Tab);
Vue.use(Tabs);

Vue.use(Card);

export default {
  data() {
    return {
        value:'',
      active: 0,
      list:[1,2,3,4,5]
    };
  },
  components:{
      carlist
  }
};
</script>

<style lang="scss" scoped>
.shoplist{
    overflow-x: hidden;
    margin-bottom: 20px;
}
.title {
  color: #000;
}
.tbs{
    margin: 0 20px;
 
}
</style>